{{ $latest := (cond (.Site.Params.docs_versioning) .Site.Params.docs_latest "") }}
<header>
  <div class="wrapper">
    <a href="{{ .Site.BaseURL }}" title="Kubeapps">
      <img class="image kubeapps-header-logo" src="/img/kubeapps-logo.svg" alt="Kubeapps logo" />
    </a>
    <a class="skip-link" href="#main">Skip to main content</a>
    <ul class="desktop-links">
      <li><a href="/" {{ if (eq .RelPermalink "/")  }} class="active" {{ end }}>Home</a></li>
      <li><a href="/community/" {{ if (eq .RelPermalink "/community/")  }} class="active" {{ end }}>Community</a></li>
      <li><a href="/resources/" {{ if (eq .RelPermalink "/resources/")  }} class="active" {{ end }}>Resources</a></li>
      <li><a href="/docs/{{ $latest }}" {{ if (eq .Page.Section "docs") }} class="active" {{ end }}>Documentation</a></li>
      <li><a target="_blank" rel="noopener" href="{{ .Site.Params.slack_url }}" title="Slack. This link will open in a new tab"><img class="logo" alt="Slack logo" src="/img/slack.svg" />Slack</a></li>
      <li><a target="_blank" rel="noopener" href="{{ .Site.Params.github_url }}" title="GitHub. This link will open in a new tab"><img class="logo" alt="GitHub logo" src="/img/github.svg" />GitHub</a></li>
    </ul>
    <button type="button" class="mobile" onclick="mobileNavToggle()">
      <img class="collapsed-icon" src="/img/hamburger.svg" alt="Mobile nav icon">
      <img class="expanded-icon" src="/img/close.svg" alt="Mobile nav icon">
    </button>
    <div id="mobile-menu" class="mobile-menu mobile">
      <ul class="header-links">
        <li><a href="/" {{ if (eq .RelPermalink "/" ) }} class="active" {{ end }}>Home</a></li>
        <li><a href="/community/" {{ if (eq .RelPermalink "/community/" ) }} class="active" {{ end }}>Community</a></li>
        <li><a href="/resources/" {{ if (eq .RelPermalink "/resources/" ) }} class="active" {{ end }}>Resources</a></li>
        <li><a href="/docs/{{ $latest }}" {{ if (eq .Page.Section "docs" ) }} class="active" {{ end }}>Documentation</a></li>
      </ul>
      <div class="social">
        <a target="_blank" rel="noopener" href="{{ .Site.Params.twitter_url }}" title="X. This link will open in a new tab"><img class="logo" alt="X logo" src="/img/twitter.svg" />X</a>
        <a target="_blank" rel="noopener" href="{{ .Site.Params.github_url }}" title="GitHub. This link will open in a new tab"><img class="logo" alt="GitHub logo" src="/img/github.svg" />GitHub</a>
        <a target="_blank" rel="noopener" href="{{ .Site.Params.slack_url }}" title="Slack. This link will open in a new tab"><img class="logo" alt="Slack logo" src="/img/slack.svg" />Slack</a>
      </div>
    </div>
  </div>
</header>
